{% extends "lxoa/layout.html" %}
{% block css %}

{% endblock %}
{% block content %}
<link rel="stylesheet" type="text/css" href="/static/lxoa/css/bootstrap-table.min.css" />
<link rel="stylesheet" type="text/css" href="/static/lxoa/css/webuploader.css" />
<script src="/static/lxoa/js/jquery-1.10.2.min.js"></script>
<script src="/static/lxoa/js/webuploader.js"></script>
<style>
    .input-group {
        width: 100%;
    }

    .input-group-addon {
        width: 120px;
    }

    .selectpicker {
        width: 100%;
        /*height: 34px;*/
    }

    .wu-example_ {
        /* position: relative; */
        padding: 45px 15px 15px;
        margin: 15px 0;
        background-color: #fafafa;
        box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
        border-color: #e5e5e5 #eee #eee;
        border-style: solid;
        border-width: 1px 0;
    }

    .wu-example {
        padding-left: 10px;
    }

    #picker {
        float: left;
    }

    #ctlBtn {
        height: 33px;
        margin-left: 4px;
        background-color: #ccc;
        height: 36px;
    }

    #picker2 {
        float: left;
    }

    #ctlBtn2 {
        height: 33px;
        margin-left: 4px;
    }

    .uploadcss {
        width: 86px;
        height: 40px;
    }
</style>

<div class="panel-body" style="margin-top:8px;">
    <!-- Table -->
    <div id="divrole" style="display:none;"></div>
    <table id="table"></table>

</div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">添加用户</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

            </div>
            <div class="modal-body">
                <div id="myAlert" class="alert alert-success hidden" style="">
                    <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                    <strong>提交成功！</strong>
                </div>

                <div id="myAlerterror" class="alert alert-warning hidden" style="">
                    <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                    <strong>提交失败，请稍后重试！</strong>
                </div>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6 margin-top-8">
                            <div class="input-group">
                                <span class="input-group-addon" id="">姓名</span>
                                <input type="text" id="username" name="username" class="form-control" placeholder="请输入" aria-describedby="basic-addon1">
                            </div>
                        </div>
                        <div class="col-md-6 margin-top-8">
                            <div class="input-group">
                                <span class="input-group-addon" id="">密码</span>
                                <input type="password" id="userpwd" autocomplete="new-password" name="userpwd" class="form-control" placeholder="请输入,密码长度最少6位" aria-describedby="basic-addon1">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 margin-top-8">
                            <div class="input-group">
                                <span class="input-group-addon" id="">邮箱</span>
                                <input type="text" id="usermail" name="usermail" class="form-control" placeholder="请输入" aria-describedby="basic-addon1">
                            </div>
                        </div>

                        <div class="col-md-6 margin-top-8">
                            <div class="input-group">
                                <span class="input-group-addon" id="">所在部门</span>
                                <select class="selectpicker" id="selectdep" name="selectdep" data-style="btn-info">
                                    <option value="1">软件研发部</option>
                                    <option value="2">行政人事部</option>
                                    <option value="3">财务部</option>
                                    <option value="4">市场销售部</option>
                                    <option value="5">系统管理</option>

                                </select>
                            </div>
                        </div>

                    </div>

                    <div class="row">

                        <div class="col-md-6 margin-top-8">
                            <div class="input-group">
                                <span class="input-group-addon" id="">入职时间</span>
                                <input type="text" id="entrydate" name="entrydate" class="form-control" placeholder="请选择" aria-describedby="basic-addon1">
                            </div>
                        </div>

                    </div>
                    <!--<div class="row" style="margin-top:10px;">
                        <div class="col-md-2 col-md-offset-10 margin-top-8">
                            <button class="btn btn-primary pull-right" id="submitbtn">Submit</button>
                        </div>
                    </div>-->

                    <div class="row">
                        <div class="col-md-12 margin-top-8">
                            <div class="input-group">
                                <span class="input-group-addon" id="">个人简历</span>

                                <div>

                                    <div id="uploader" class="wu-example">
                                        <!--用来存放文件信息-->
                                        <div id="thelist" class="uploader-list"></div>
                                        <div class="btns">
                                            <div id="picker">选择文件</div>
                                            <button id="ctlBtn" class="btn btn-default">开始上传</button>
                                        </div>
                                    </div>

                                </div>
                                <input type="hidden" id="resumefiles" name="resumefiles">

                                <script>
                                    var uploader = WebUploader.create({
                                        swf: '/static/lxoa/js/Uploader.swf',
                                        server: '/lxoa/upload_ajax/',
                                        pick: '#picker',
                                        accept: {
                                            title: 'document',
                                            extensions: 'doc,docx,pdf',
                                            mimeTypes: 'document/*'
                                        },
                                        resize: false
                                    });

                                    $("#ctlBtn").click(function () {
                                        uploader.upload();
                                    });
                                    uploader.on('fileQueued', function (file) {
                                        $('#thelist').append('<div id="' + file.id + '" class="item">' +
                                            '<h5 class="info">' + file.name + '</h5>' +
                                            '<p class="state">等待上传...</p>' +
                                            '</div>');
                                    });

                                    // 文件上传过程中创建进度条实时显示。
                                    uploader.on('uploadProgress', function (file, percentage) {
                                        var $li = $('#' + file.id),
                                            $percent = $li.find('.progress span');
                                        // 避免重复创建
                                        if (!$percent.length) {
                                            $percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span');
                                        }
                                        $percent.css('width', percentage * 100 + '%');
                                    });

                                    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                                    uploader.on('uploadSuccess', function (file, response) {
                                        $('#' + file.id).addClass('upload-state-done');
                                        if (response.success == '1') {
                                            $('#resumefiles').val(response.newfilename);
                                            $('#thelist').html('<div id="' + file.id + '" class="item">' +
                                                '<h5 class="info">' + file.name + '</h5>' +
                                                '<p class="state">上传成功</p>' +
                                                '</div>');
                                        }
                                    });

                                    // 文件上传失败，显示上传出错。
                                    uploader.on('uploadError', function (file) {
                                        //var $li = $('#' + file.id),
                                        //    $error = $li.find('div.error');

                                        //// 避免重复创建
                                        //if (!$error.length) {
                                        //    $error = $('<div class="error"></div>').appendTo($li);
                                        //}
                                        //$error.text('上传失败');
                                        $('#thelist').html('<div id="' + file.id + '" class="item">' +
                                            '<h5 class="info">' + file.name + '</h5>' +
                                            '<p class="state">上传失败</p>' +
                                            '</div>');
                                    });

                                    // 完成上传完了，成功或者失败，先删除进度条。
                                    uploader.on('uploadComplete', function (file) {
                                        $('#' + file.id).find('.progress').remove();
                                    });

                                </script>
                            </div>
                        </div>

                    </div>


                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
                <button type="button" class="btn btn-primary" id="submitbtn"> 提交 </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<div class="modal fade" id="myModaledit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">编辑用户</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                
            </div>
            <div class="modal-body">
                <div id="myAlert2" class="alert alert-success hidden" style="">
                    <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                    <strong>提交成功！</strong>
                </div>

                <div id="myAlerterror2" class="alert alert-warning hidden" style="">
                    <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                    <strong>提交失败，请稍后重试！</strong>
                </div>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-6 margin-top-8">
                            <div class="input-group">
                                <span class="input-group-addon" id="">姓名</span>
                                <input type="text" id="username2" name="username2" class="form-control" placeholder="请输入" aria-describedby="basic-addon1">
                            </div>
                        </div>
                        <div class="col-md-6 margin-top-8">
                            <div class="input-group">
                                <span class="input-group-addon" id="">密码</span>
                                <input type="password" id="userpwd2" autocomplete="new-password" name="userpwd2" class="form-control" placeholder="请输入,密码长度最少6位" aria-describedby="basic-addon1">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 margin-top-8">
                            <div class="input-group">
                                <span class="input-group-addon" id="">邮箱</span>
                                <input type="text" id="usermail2" name="usermail2" class="form-control" placeholder="请输入" aria-describedby="basic-addon1">
                            </div>
                        </div>

                        <div class="col-md-6 margin-top-8">
                            <div class="input-group">
                                <span class="input-group-addon" id="">所在部门</span>
                                <select class="selectpicker" id="selectdep2" name="selectdep2" data-style="btn-info">
                                    <option value="1">软件研发部</option>
                                    <option value="2">行政人事部</option>
                                    <option value="3">财务部</option>
                                    <option value="4">市场销售部</option>
                                    <option value="5">系统管理</option>

                                </select>
                            </div>
                        </div>

                    </div>

                    <div class="row">

                        <div class="col-md-6 margin-top-8">
                            <div class="input-group">
                                <span class="input-group-addon" id="">入职时间</span>
                                <input type="text" id="entrydate2" name="entrydate2" class="form-control" placeholder="请选择" aria-describedby="basic-addon1">
                            </div>
                        </div>


                    </div>
                    <!--<div class="row" style="margin-top:10px;">
                        <div class="col-md-2 col-md-offset-10 margin-top-8">
                            <button class="btn btn-primary pull-right" id="submitbtn">Submit</button>
                        </div>
                    </div>-->
                    <div class="row">

                        <div class="col-md-12 margin-top-8">
                            <div class="input-group">
                                <span class="input-group-addon" id="">个人简历</span>

                                <div>

                                    <div id="uploader2" class="wu-example">
                                        <!--用来存放文件信息-->
                                        <div id="thelist2" class="uploader-list"></div>
                                        <div class="btns">
                                            <div id="picker2">选择文件</div>
                                            <button id="ctlBtn2" class="btn btn-default">开始上传</button>
                                        </div>
                                    </div>

                                </div>
                                <input type="hidden" id="resumefiles2" name="resumefiles2">

                                <script>
                                    var uploader2 = WebUploader.create({
                                        swf: '/static/lxoa/js/Uploader.swf',
                                        server: '/lxoa/upload_ajax/',
                                        pick: '#picker2',
                                        accept: {
                                            title: 'document',
                                            extensions: 'doc,docx,pdf',
                                            mimeTypes: 'document/*'
                                        },
                                        resize: false
                                    });

                                    $("#ctlBtn2").click(function () {
                                        uploader2.upload();
                                    });
                                    uploader2.on('fileQueued', function (file) {
                                        $('#thelist2').append('<div id="' + file.id + '" class="item">' +
                                            '<h5 class="info">' + file.name + '</h5>' +
                                            '<p class="state">等待上传...</p>' +
                                            '</div>');
                                    });

                                    // 文件上传过程中创建进度条实时显示。
                                    uploader2.on('uploadProgress', function (file, percentage) {
                                        var $li = $('#' + file.id),
                                            $percent = $li.find('.progress span');
                                        // 避免重复创建
                                        if (!$percent.length) {
                                            $percent = $('<p class="progress"><span></span></p>').appendTo($li).find('span');
                                        }
                                        $percent.css('width', percentage * 100 + '%');
                                    });

                                    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
                                    uploader2.on('uploadSuccess', function (file, response) {
                                        $('#' + file.id).addClass('upload-state-done');
                                        if (response.success == '1') {
                                            $('#resumefiles2').val(response.newfilename);
                                            $('#thelist2').html('<div id="' + file.id + '" class="item">' +
                                                '<h5 class="info">' + file.name + '</h5>' +
                                                '<p class="state">上传成功</p>' +
                                                '</div>');
                                        }
                                    });

                                    // 文件上传失败，显示上传出错。
                                    uploader2.on('uploadError', function (file) {
                                        //var $li = $('#' + file.id),
                                        //    $error = $li.find('div.error');

                                        //// 避免重复创建
                                        //if (!$error.length) {
                                        //    $error = $('<div class="error"></div>').appendTo($li);
                                        //}
                                        //$error.text('上传失败');
                                        $('#thelist2').html('<div id="' + file.id + '" class="item">' +
                                            '<h5 class="info">' + file.name + '</h5>' +
                                            '<p class="state">上传失败</p>' +
                                            '</div>');
                                    });

                                    // 完成上传完了，成功或者失败，先删除进度条。
                                    uploader2.on('uploadComplete', function (file) {
                                        $('#' + file.id).find('.progress').remove();
                                    });

                                </script>
                            </div>
                        </div>

                    </div>


                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
                <button type="button" class="btn btn-primary" onclick="editsubmit()" id="submitbtn2"> 提交 </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="myModaldel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">删除选中用户</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                
            </div>
            <div class="modal-body">
                <div id="myAlert" class="alert alert-success hidden" style="">
                    <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                    <strong>删除成功！</strong>
                </div>

                <div id="myAlerterror" class="alert alert-warning hidden" style="">
                    <!--<a href="#" class="close" data-dismiss="alert">&times;</a>-->
                    <strong>删除失败，请稍后重试！</strong>
                </div>

                <div class="panel-body">
                    <div class="row">
                        <h5>您确定要删除此信息吗 ？</h5>
                    </div>

                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
                <button type="button" class="btn btn-primary" id="delbtn" onclick="deluser()"> 确定 </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>



{% endblock %}

{% block scripts %}
<script src="/static/lxoa/js/bootstrap.min.js"></script>
<script src="/static/lxoa/js/bootstrap-table.min.js"></script>
<!--<script src="/static/lxoa/js/bootstrap-table-locale-all.min.js"></script>-->
<script src="/static/lxoa/laydate/laydate.js"></script>
<script src="/static/lxoa/js/tableuser.js"></script>


{% endblock %}
